<template>
  <div>
    <van-nav-bar
      fixed
      :title="title"
      left-arrow
      right-text="删除"
      class="bg-primary color-white"
      @click-left="goback"
      @click-right="showDeldeteProductDialog=true"
    />
    <div class="has-top has-bottom">
      <div class="bg-box bg-primary" />
      <van-form ref="detailForm">
        <!-- 详情 -->
        <div class="br-12 mg-25 pd-25 bg-white">
          <h3 class="item-tle  left-star">桌号</h3>
          <div class=" mt-15">
            <div class="prductItem-detail ">
              <p class="color-gray mb-10 ml-15">桌号名称</p>
              <van-field
                v-model="productDetail.Name"
                class="pos-a bottom-0"
                name="名称"
                label=""
                placeholder="请输入名称"
                :rules="[{ required: true, message: ' ' }]"
              />
            </div>   
          </div>       
        </div>

        <!-- 桌位 -->
        <div class="br-12 mg-25 pd-25 bg-white">
          <h3 class="item-tle left-star">选择桌位</h3>
          <div class="flex mt-15">
            <ul class="classifyList flex">
              <li v-for="(item,index) in seatList" :key="index" class="classifyItem flex-s-0 " :class="index === activeIndex ? 'activeClassify' : ''" @click="changeSeat(index)">
                <p>{{ item.Name }}</p>
              </li>
              <li class="classifyItem flex-s-0 openClassifyList" @click="openClassifyList(1)">
                <p><svg-icon icon-class="add" class="fs-30 add" @goPage="openClassifyList(1)"/><span @click="openClassifyList(1)">添加桌位</span></p>
              </li>
            </ul>
          </div>
          <p v-show="activeIndex<0" class="color-danger fs-20">请选择桌位</p>
        </div>

        <!-- 桌型 -->
        <div class="br-12 mg-25 pd-25 bg-white">
          <h3 class="item-tle left-star">选择桌型</h3>
          <div class="flex mt-15">
            <ul class="classifyList flex">
              <li v-for="(item,index) in typeList" :key="index" class="classifyItem flex-s-0 " :class="index === activeTypeIndex ? 'activeClassify' : ''" @click="changeType(index)">
                <p>{{ item.Name }}</p>
              </li>
              <li class="classifyItem flex-s-0 openClassifyList" @click="openClassifyList(2)">
                <p><svg-icon icon-class="add" class="fs-30 add" @goPage="openClassifyList(2)"/><span @click="openClassifyList(2)">添加桌型</span></p>
              </li>
            </ul>
          </div>
          <p v-show="activeTypeIndex<0" class="color-danger fs-20">请选择桌型</p>
        </div>
      </van-form>
    </div>

    <div class="nav-bottom fixed-bottom">
      <div class="btn-box flex-s-c">
        <button class="btn-middle bg-primary color-white" @click="updateStatu(productDetail.State)">{{productDetail.State !== 2?'禁用':'启用'}}</button>
        <button class="btn-middle bg-second color-white" @click="save">保存</button>
      </div>
    </div>

    <!-- 分类弹出层 -->
    <van-popup v-model="showClassifyList" position="right" style="width:100%;height:100%;background:#f5f5f5">
      <productClassifyEdit :classify-list="classifyList" :mode="mode" @closeClassifyList="closeClassifyList" />
    </van-popup>


    <!-- 删除商品提示弹窗 -->
    <van-dialog v-model="showDeldeteProductDialog" :show-cancel-button="noshow" :show-confirm-button="noshow" class="dialog">
      <div class="plr-50 fs-28">
        <h2 class="tac fs-34 fw-500 pt-40 pb-20">提示</h2>
        <p class="pb-30  tac">确定要删除此商品？ </p>
      </div>
      <div class="ht fs-32 flex">
        <button class="flex-1 tac lh-100 hr dialog-btn" @click="showDeldeteProductDialog=false">返回</button>
        <button class="color-primary flex-1 tac lh-100 dialog-btn" @click="deleteProduct">确定</button>
      </div>
    </van-dialog>


  </div>
</template>

<script>
import draggable from 'vuedraggable'
import imgBox from 'components/imgBox'
//import productClassifyEdit from 'views/viewComponents/productClassifyEdit'
import productClassifyEdit from 'components/tableComponents/productClassifyEdit'
import { upLoad } from 'api/upload'
import { GetStoreProductCategoryList, GetStoreTableInfo,  EditStoreProduct,
	GetStoreTableModeList,EditStoreTable,DeleteStoreTable,UpdateStoreTableState} from 'api/store'
export default {
  components: {
    draggable,
    imgBox,
    productClassifyEdit
  },
  data() {
    return {
      // 初始数据
      title: '桌号编辑',
      rightText: '排序',
      activeIndex: -1,
			activeTypeIndex: -1,
      pageData: {
        logo: '',
        sku: '',
        imgList: []
      },
      showClassifyList: false,
      showSpec: false,
      showDeldeteProductDialog: false,
      showDeldeteSpecDialog: false,
      noshow: false,
      options: {
        // delay: 100,
        group: 'product',
        delayOnTouchOnly: true,
        animation: 150,
        handle: '.drag-item'
      },

      // 接口返回数据
			classifyList:[],
			seatList:[],//桌位列表
			typeList:[], // 桌型列表
			mode:1, // 1 桌位 2 桌型
			productDetail:{},


    }
  },
  created() {		
		const _params = JSON.parse(this.$route.params.params)
		if (typeof (_params) === 'number') {
			this.GetStoreTableInfo(_params)
		} else if (typeof (_params) === 'object') {
			this.productDetail = _params
			//this.GetStoreProductCategoryList()
		}		
		this.getStoreSeatList()
		this.getStoreTypeList()
  },
  mounted() {
  },
  methods: {
		// 获取桌位列表
    getStoreSeatList() {
      GetStoreTableModeList({mode:1}).then(res => {
        if (res) {
          this.seatList = res.Data
          if (this.productDetail.SeatModeId) {
            const _id = this.productDetail.SeatModeId
            this.seatList.forEach((item, index) => {
              if (item.ID === _id) {
                this.activeIndex = index
              }
            })
          }
        }
      })     
    },
		// 获取桌型列表
    getStoreTypeList() {
      GetStoreTableModeList({mode:2}).then(res => {
        if (res) {
          this.typeList = res.Data
					console.log(this.typeList,'zhuo')
          if (this.productDetail.TypeModeId) {
            const _id = this.productDetail.TypeModeId
            this.typeList.forEach((item, index) => {
              if (item.ID === _id) {
                this.activeTypeIndex = index
              }
            })
          }
        }
      })     
    },
    // 返回
    goback() {
      // 先判断是否为新商品，然后再判断数据是否变化
      this.$utils.back(this.$route.path)
    },

    // 删除商品
    deleteProduct() {
			
			console.log(this.productDetail.ID,'删除')
      // 判断是否为新增产品
      if (this.productDetail.ID === 0) {
        this.$utils.back(this.$route.path)
      } else {
        this.DeleteStoreTable(this.productDetail.ID)
      }
    },
   
    // 点击选择桌位
    changeSeat(index) {
      this.activeIndex = index
      this.productDetail.SeatModeId = this.seatList[index].ID
    },
    // 点击选择桌型
    changeType(index) {
      this.activeTypeIndex = index
      this.productDetail.TypeModeId = this.typeList[index].ID
    },
    // 打开分类窗口
    openClassifyList(type) {
			if(type === 1) {
				this.classifyList = this.seatList
			}else{
				this.classifyList = this.typeList
			}
			this.mode = type
      this.showClassifyList = true
			console.log(type,this.classifyList,"open")
    },
    // 关闭分类窗口
    closeClassifyList(val) {
      if (val) {
				if(this.mode === 1){
					this.getStoreSeatList()
				}else{
					this.getStoreTypeList()
				}
      }
			this.classifyList = []
      console.log(this.classifyList,this.typeList,"close")
      this.showClassifyList = false
    },
    
    onBlur() {
      console.log('失焦')
      this.$forceUpdate()
    },
    // 上/下架
    updateStatu(state) {
			this.productDetail.State = 2
			if(state === 2){
				this.productDetail.State = 0
			}
      UpdateStoreTableState({id:this.productDetail.ID,state:this.productDetail.State}).then(res =>{
				if(res.State){
					this.$toast('修改状态成功')
				}
			})
    },
    // 保存
    save() {
      this.$refs.detailForm.validate().then(() => {
        if (this.activeIndex < 0 || this.activeTypeIndex < 0) {
          this.$toast.fail('请将信息填写完整')
          return
        }
        this.EditStoreProduct()
      })
    },

    // 获取门店商品详情
    GetStoreTableInfo(id) {
      GetStoreTableInfo({ ID: id }).then(res => {
        if (res) {
					console.log(res.Data,"详情")
          this.productDetail = res.Data
          if (res.Data.ImageUrl) {
            this.pageData.imgList = res.Data.ImageUrl.split(',')
            if (this.pageData.imgList.length > 0) {
              this.pageData.logo = this.pageData.imgList[0]
            }
          }
          if (res.Data.ProductSkuList && res.Data.ProductSkuList.length > 0) {
            this.pageData.sku = res.Data.ProductSkuList[0].Sku
          }
          //this.GetStoreProductCategoryList()
					//this.getStoreTableCategoryList()
        }
      })
    },
    // 增改门店商品
    EditStoreProduct() {			
			console.log('this.productDetail',this.productDetail)		
      EditStoreTable(this.productDetail).then(res => {
        if (res) {
          if (res.Data) {
            this.$toast.success('成功')
            this.$utils.back(this.$route.path)
          } else {
            this.$toast.fail(res.Msg || '失败')
          }
        }
      })
    },
    // 删除门店商品
    DeleteStoreTable(id) {
      DeleteStoreTable({ ids: id }).then(res => {
        if (res) {
          this.$toast.success('删除成功')
          this.$utils.back(this.$route.path)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.color-white{
  /deep/.van-icon,/deep/.van-nav-bar__title,/deep/.van-nav-bar__text{
    color: #fff !important;
  }
}
/deep/.van-hairline--bottom::after{
  border:none;
}
.bg-box{
  position: absolute;
  width: 100%;
  height: 250px;
  border-radius: 0 0 30% 30%;
  z-index: -1;
}
.prductItem-detail{
  padding-bottom: 80px;
  position: relative;
  .van-cell{
    padding-left: 7.5px;
    font-size: 12px;
    background: #f7f7f7;
  }
}
.product-price-box,.product-stock{
  .van-cell{
    padding-left:7.5px;
    line-height: 1.5;
    font-size: 12px;
    background: #f7f7f7;
  }
  .flex-item{
    width:calc(50% - 12px);
  }
}
.product-stock{
  .van-cell{
    /deep/.van-field__label{
      width: auto;
    }
    /deep/.van-cell__value{
      .van-field__control{
      text-align: left;
      }
    }
  }
}
.product-sku-list{
  .van-cell{
    padding: 11px 7px;
    /deep/.van-cell__value{
      font-size: 12px;
      line-height: 1;
    }
  }

}
.item-tle{
  font-weight: 500;
  font-size: 28px;
  color: #000;
  position: relative;
}
.left-star{
  padding-left: 15px;
  &::before{
    content: "*";
    color: #FF0202;
    position: absolute;
    font-size: 28px;
    top: 5px;
    left: 0;
  }
}
.classifyList{
  width: 100%;
  flex-wrap: wrap;
  .classifyItem{
    width: calc(25% - 18px);
    text-align: center;
    line-height: 3;
    height: 72px;
    background: #F4F4F4;
    color:$color6;
    margin-bottom: 24px;
    margin-right: 24px;
    border-radius: 6px;
    &:nth-child(4n){
      margin-right: 0;
    }
  }
  .activeClassify{
   @include bg-primary;
   color:$colorF;
  }
  .openClassifyList{
    background: #fff;
    height: 72px;
    border:1px dashed$color6;
    line-height: 70px;
    p{
      padding-left: 30px;
      display: inline-block;
      position: relative;
      .add{
        position: absolute;
        left: 0;
        top: 19px;
      }
    }
  }
}
.arrow{
  font-weight: 500;
  font-size: 24px;
  height: 100%;
  line-height: 56px;
  display: inline-block;
  padding-right: 30px;
  position: absolute;
  right: 0;
  &:after{
    right: 0;
    top: 20px;
  }
}
.left-line{
  padding-left: 20px;
  position: relative;
  line-height: 1;
  &::before{
    content: '';
    position: absolute;
    height: 100%;
    width: 4px;
    @include bg-primary;
    left: 0;
    top: 0;
  }
}
.productImgItem{
  display: inline-block;
  position: relative;
  height: 136px;
  width: 136px;
  margin-right: 34px;
  margin-bottom: 24px;
  &:nth-child(4n+4){
    margin-right: 0;
  }
  img{
    width: 100%;
    height: 100%;
  }
  .img-close-box{
    position: absolute;
    padding: 10px;
    top: -20px;
    right: -20px;
    line-height: 1;
    .img-close{
      position: relative;
      display: inline-block;
      height: 24px;
      width: 24px;
      border-radius: 50%;
      background: $black;
      &::before,&::after{
        content: '';
        position: absolute;
        width: 2px;
        height: 15px;
        transform: rotate(45deg);
        background: $colorF;
        top: 5px;
        left: 11px;
      }
      &::after{
        transform: rotate(-45deg);
      }
    }
  }
}
.add-img{
  border: 1px solid$colorC;
  &:before,&:after{
    content: '';
    position: absolute;
    height: 56px;
    width: 4px;
    top: 40px;
    left: 66px;
    background:$colorC;
  }
  &:after{
    height: 4px;
    width: 56px;
    top: 66px;
    left: 40px;
  }
  /deep/.van-uploader{
    height: 100%;
    width: 100%;
    margin: 0;
    .van-uploader__wrapper{
      height: 100%;
      width: 100%;
      margin: 0;
      .van-uploader__upload{
        height: 100%;
        width: 100%;
        margin: 0;
        background: transparent;
        .van-icon{
          display: none;
        }
      }
    }
  }
}
.textarea-box{
  /deep/.van-cell{
    background: $colorF7;
    border-radius: 6px;
    font-size: 12px;
  }
  /deep/.van-field__word-limit{
    color:$color9;
  }
}
.checkbox{
  position: relative;
  &:before{
    content:'';
    display: inline-block;
    position: absolute;
    width:32px;
    height: 32px;
    border: 1px solid $colorC;
    border-radius: 50%;
    right: 0;
  }
}
.checked{
  &:before{
    @include bg-primary();
    @include border-primary();
  }
  &:after{
    content: "";
    position: absolute;
    width: 8px;
    height: 15px;
    transform: rotate(45deg);
    border: 1px solid;
    border-color: transparent $colorF $colorF transparent;
    right: 12px;
    top: 5px;
  }
}
.btn-box{
  margin: 0 50px;
  height: 100%;
}

.input{
  width: 100%;
  border-radius: 12px;
  padding: 0 150px 0 20px;
  background: $colorF7;
  line-height: 80px;
}
.btn{
  line-height: 80px;
  padding: 0;
  width: 150px;
  font-size: 28px;
  border-radius: 0 12px 12px 0;
  @include bg-primary();
  color:$colorF;
  position: absolute;
  top: 0;
  right: 0;
}
.btn-active{
  line-height: 76px;
  box-sizing: border-box;
  height: 80px;
  padding: 0;
  width: 150px;
  font-size: 28px;
  border-radius: 0 12px 12px 0;
  @include color-primary();
  border: 1px solid currentColor;
  background: $colorF;
  position: absolute;
  top: 0;
  right: 0;
}
.pop-classify-litem{
  &:not(:last-child){
    border-bottom: 1px solid #e6e6e6;
  }
  p{
    font-size: 26px;
    line-height: 98px;
  }
}
.dialog{
  /deep/.van-dialog__confirm, .van-dialog__confirm:active{
    @include color-primary();
  }
  .input-1{
    line-height: 3;
    padding: 0 20px;
    background: $colorF7;
    border-radius: 12px;
  }
  .dialog-btn{
    background: $colorF;
    &:active{
      background: $colorF7;
    }
  }
}
</style>
